<template>
    <div>
        <div 
            :style="{backgroundImage:'url('+targetFilm.poster+')'}" 
            style="height:200px;background-size:cover;background-position:center;"
        ></div>
        <div style="margin:10px 0 0 18px">
            <span>{{ targetFilm.name }} <span style="background:rgb(210,214,220);color:#fff;font-size:10px;font-weight:bold;">{{ targetFilm.filmType.name }}</span> </span>         
            <span style="color:gold;font-size:18px;float:right;margin-right:5px">{{ targetFilm.grade }}分</span>
        </div>
        <div class="smallIfon">
            <span>{{ targetFilm.category }}</span>
        </div>
        <div class="smallIfon">
            <span>{{ targetFilm.premiereAt }}上映</span>
        </div>
        <div class="smallIfon">
            <span>{{ targetFilm.nation }} | {{ targetFilm.runtime }} 分钟</span>
        </div>
        <div class="smallIfon synopsis" :style="!isShow ? {height:'20px'}:{height:'50px'}">
            {{ targetFilm.synopsis }}
        </div>
        <div style="text-align: center">
            <i class="iconfont" :class="isShow ? 'icon-shang' : 'icon-xia'" @click="isShow = !isShow"></i>
        </div>
    </div>
</template>

<script>
import http from '@/utils/http.js'
export default {
    data(){
        return {
            targetFilm:[],
            isShow:false
        }
    },
    created(){
        http({
          url:`https://m.maizuo.com/gateway?filmId=${this.$route.params.id}&k=9244564`,
          headers:{
                'X-Host': 'mall.film-ticket.film.info'
          }//配置headers解决跨域问题
        }).then(res => {
          this.targetFilm = res.data.data.film
          console.log(this.targetFilm);
        })
    },
}
</script>
<style lang="scss" scoped>
    .smallIfon{
        margin:2px 0 0 18px;
        span{
            color:rgb(121,125,130);
            font-size:13px;
        }
        
    }
    .synopsis{
        overflow:hidden;
        color:rgb(121,125,130);
        font-size:13px;
        margin-top: 10px;
        transition:.3s
    }
</style>